import Vue from "vue";
import VueRouter from "vue-router";
import Notfund from "../views/404.vue";
import Forbidden from "../views/403.vue";
import {
  notification
} from 'ant-design-vue';
import findLast from "lodash/findLast";
import {
  check,
  isLogin
} from '../utils/auth'
import Nprogress from "nprogress";
import 'nprogress/nprogress.css';
// import {
//   from
// } from "core-js/core/array";
Vue.use(VueRouter);

//路由配置方案基于两种 , 基于配置 , 基于约定
//基于约定:基于第三方指定的规则来书写文件 , 然后它通过工具生成转换规则
//方便拓展 , 使用的是嵌套路由

const routes = [{
    path: "/user",
    name: "user",
    hideInMenu: true,
    component: () =>
      import( /* webpackChunkName: "user" */ "../Layouts/UserLayout.vue"),
    children: [{
        path: "/user",
        redirect: "/user/login",
      },
      {
        path: "/user/login",
        name: "login",
        component: () =>
          import( /* webpackChunkName: "user" */ "../Layouts/User/Login.vue"),
      },
      {
        path: "/user/register",
        name: "register",
        component: () =>
          import( /* webpackChunkName: "user" */ "../Layouts/User/Register.vue"),
      },
    ],
  },
  {
    path: "/",
    meta: {
      authority: ["user", "admin"]
    },
    component: () =>
      import( /* webpackChunkName: "layout" */ "../Layouts/BasicLayout.vue"),
    children: [
      // dashboard  仪表盘
      {
        path: "/",
        redirect: "/dashboard/analysis" //分析页
      },
      {
        path: "/dashboard",
        name: "dashboard",
        meta: {
          icon: "dashboard",
          title: "仪表盘"
        },
        component: {
          render: h => h("router-view")
        },
        children: [{
          path: "/dashboard/analysis",
          name: "analysis",
          meta: {
            title: "分析页"
          },
          component: () =>
            import( /* webpackChunkName: "dashboard" */ "../views/Dashboard/Analysis")
        }]
      },
      // form 表单
      {
        path: "/form",
        name: "form",
        component: {
          render: h => h("router-view")
        },
        meta: {
          icon: "form",
          title: "表单",
          authority: ["admin"]
        },
        children: [{
            path: "/form/basic-form", //基础表单
            name: "basicform",
            meta: {
              title: "基础表单",
              icon: "appstore"
            },
            component: () =>
              import( /* webpackChunkName: "form" */ "../views/Forms/BasicForm")
          },
          {
            path: "/form/step-form", //分步表单
            name: "stepform",
            hideChildrenInMenu: true,
            meta: {
              title: "分布表单"
            },
            component: () =>
              import( /* webpackChunkName: "form" */ "../views/Forms/StepForm"),
            children: [{
                path: "/form/step-form",
                redirect: "/form/step-form/info"
              },
              {
                path: "/form/step-form/info", //分步表单的第一页
                name: "info",
                component: () =>
                  import( /* webpackChunkName: "form" */ "../views/Forms/StepForm/Step1")
              },
              {
                path: "/form/step-form/confirm", //信息页
                name: "confirm",
                component: () =>
                  import( /* webpackChunkName: "form" */ "../views/Forms/StepForm/Step2")
              },
              {
                path: "/form/step-form/result", //结果页
                name: "result",
                component: () =>
                  import( /* webpackChunkName: "form" */ "../views/Forms/StepForm/Step3")
              }
            ]
          }
        ]
      },

      // Exception
      // {
      //   path: "/exception",
      //   name: "exception",
      //   component: {
      //     render: h => h("router-view")
      //   },
      //   redirect: "/exception/403",
      //   meta: {
      //     title: "异常页",
      //     icon: "warning",
      //     authority: ["admin"]
      //   },
      //   children: [{
      //       path: "/exception/403",
      //       name: "exception403",
      //       component: () =>
      //         import( /* webpackChunkName: "exception" */ "@/views/Exception/403"),
      //       meta: {
      //         title: "403"
      //       }
      //     },
      //     {
      //       path: "/exception/404",
      //       name: "exception404",
      //       component: () =>
      //         import( /* webpackChunkName: "exception" */ "@/views/Exception/404"),
      //       meta: {
      //         title: "404"
      //       }
      //     },
      //     {
      //       path: "/exception/500",
      //       name: "exception500",
      //       component: () =>
      //         import( /* webpackChunkName: "exception" */ "@/views/Exception/500"),
      //       meta: {
      //         title: "500"
      //       }
      //     }
      //   ]
      // },
      // // Profile
      // {
      //   path: "/profile",
      //   name: "profile",
      //   component: {
      //     render: h => h("router-view")
      //   },
      //   redirect: "/profile/basic",
      //   meta: {
      //     title: "详情页",
      //     icon: "profile",
      //     authority: ["admin"]
      //   },
      //   children: [{
      //       path: "/profile/basic",
      //       name: "basic",
      //       component: () =>
      //         import( /* webpackChunkName: "profile" */ "@/views/Profile/BasicProfile"),
      //       meta: {
      //         title: "基础详情页"
      //       }
      //     },
      //     {
      //       path: "/profile/advanced",
      //       name: "advanced",
      //       component: () =>
      //         import( /* webpackChunkName: "profile" */ "@/views/Profile/AdvancedProfile"),
      //       meta: {
      //         title: "高级详情页"
      //       }
      //     }
      //   ]
      // }
    ]
  },
  {
    path: "*",
    name: "404",
    component: Notfund,
    meta: {
      title: '404'
    },
    hideInMenu: true
  },
  {
    path: "/403",
    name: "403",
    component: Forbidden,
    meta: {
      title: '403'
    },
    hideInMenu: true
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});
router.beforeEach((to, from, next) => {
  if (to.path != from.path) {
    Nprogress.start();
  }


  const record = findLast(to.matched, record => record.meta.authority);

  if (record && !check(record.meta.authority)) {
    if (!isLogin() && to.path !== '/user/login') {
      next({
        path: '/user/login'
      })
    } else if (to.path !== '/403') {
      //$notification是注入到了vue中 ，router需要使用需要单独引入
      notification.error({
        message: '403',
        description: '你没有权限，请联系管理员。'
      });
      next({
        path: '/403'
      })
    }
    Nprogress.done()
  }

  next()

})
router.afterEach(route => {
  Nprogress.done()
})
export default router;